/*
 * @Description: 
 * @Author: 张民鸿
 * @Date: 2021-10-11 11:13:17
 * @FilePath: /cloud-register-business/Users/zhang/Desktop/zhang/zhang-cli/src/pages/login/index.tsx
 * @LastEditTime: 2021-11-29 15:58:49
 * @LastEditors: MelodyJerry
 */
import React, { useState, useEffect } from 'react'
import { Form, Input, Button } from 'antd';
import { connect } from 'react-redux';
import Icon, { UserOutlined, LockOutlined, MobileOutlined } from '@ant-design/icons';
import VerificationCodeInput from '~components/VerificationCodeInput';
import { SAVE_LOGIN_INFO } from '~reducers/common';
import { dispatchWithPromise } from '~/utils/util';
import { Redirect } from 'react-router';
import { getCodeUrl, getLoginInfo, getverifyCodeLoginInfo } from '~/apis/login'
import Style from './index.less';
interface LoginPageProps {
    loginInfo?: boolean
    img?: boolean
    imgKey: string
    title?: string
}
const LoginPage = ({ loginInfo, imgKey, title }: LoginPageProps) => {
    const [form] = Form.useForm();
    const [loginStatus, setloginStatus] = useState(0)
    const [submitting, setSubmitting] = useState(false);
    function submitHandle() {
        form.validateFields().then(async (values: any) => {
            setSubmitting(true);
            values.imgKey = imgKey;
            try {
                let res = loginStatus == 1 ? await getLoginInfo(values) : await getverifyCodeLoginInfo(values)
                console.log(res)
                dispatchWithPromise({ type: SAVE_LOGIN_INFO, data: res.data })
            } catch (e) {
            }
            setSubmitting(false)
        })
    }
    useEffect(() => {
        setSubmitting(submitting)
    }, [submitting])
    //发送验证码
    async function getCodeOk() {
        let url: string = form.getFieldValue('loginName')
        return await getCodeUrl(url)
    }
    return (
        loginInfo ?
            <Redirect to="/home" />
            :
            <div className={Style["login_container"]}>
                <h1 className={Style["system_title"]}>{title}</h1>
                <div className={Style["login_form"]}>
                    <div className={Style['tab']}>
                        <div className={Style['tabItem'] + ' ' + (loginStatus == 0 ? Style['active'] : '')} onClick={() => setloginStatus(0)}>验证码登录</div>
                        <div className={Style['tabItem'] + ' ' + (loginStatus == 1 ? Style['active'] : '')} onClick={() => setloginStatus(1)}>账号密码登录</div>
                    </div>
                    <Form layout="vertical" form={form}>
                        <Form.Item name="loginName" rules={[{ required: true, message: '请输入帐号' }]}>
                            <Input size="large" placeholder="请输入帐号" prefix={<MobileOutlined />} />
                        </Form.Item>
                        {
                            loginStatus == 0 ?
                                <Form.Item name="verifyCode" rules={[{ required: true, message: '请输入验证码' }]}>
                                    <VerificationCodeInput getCodeOk={getCodeOk} size="large" placeholder="请输入验证码" />
                                </Form.Item> : ''
                        }
                        {
                            loginStatus == 1 ?
                                <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
                                    <Input.Password type="password" size="large" placeholder="请输入密码" prefix={<LockOutlined />} />
                                </Form.Item> : ''
                        }
                        <Button htmlType="submit" loading={submitting} type="primary" block size="large" onClick={submitHandle}>登录</Button>
                    </Form>
                </div>
            </div>
    )
}
export default connect((state: any) => {
    return {
        ...state.common
    }
})(LoginPage)